
<template>
    <div class="edu-page-warp">
        <div v-if="listShow">
            <ConditionCard
                shadow="never"
                body-style="padding: 24px 24px 6px 24px;"
                @search="filterTaskSubmit"
                @reset="resetForm('queryForm')"
            >
                <el-form ref="queryForm" :model="query" label-position="left" label-width="80px">
                    <el-row :gutter="20">
                        <!-- <el-col :span="8">
                            <el-form-item label="学院:" prop="departmentId" class="no-bottom">
                                <el-select
                                    v-model="query.departmentId"
                                    placeholder="选择学院"
                                    @change="changeFaculty"
                                    filterable
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.faculty"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="专业:" prop="major" class="no-bottom">
                                <el-select v-model="query.major" placeholder="选择专业" style="width: 100%">
                                    <el-option
                                        v-for="item in options.profession"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="审批状态:" prop="status" class="no-bottom">
                                <el-select
                                    v-model="query.status"
                                    placeholder="选择审批状态"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in options.status"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8">
                            <el-form-item label="申请编号:" class="no-bottom">
                                <el-input
                                    v-model="query.no"
                                    clearable
                                    placeholder="请输入申请编号"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="申请人:" prop="major" class="no-bottom">
                                <el-input
                                    v-model="query.applicantName"
                                    clearable
                                     placeholder="请输入申请人姓名"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="起始时间:" prop="startTime" class="no-bottom">
                                <el-date-picker
                                    v-model="query.startTime"
                                    :picker-options="pickerOptions"
                                    type="datetime"
                                    placeholder="选择开始时间"
                                    format="yyyy/MM/dd HH:mm"
                                    value-format="timestamp"
                                    align="right"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <!-- <el-col :span="8">
                            <el-form-item label="起始时间:" prop="startTime" class="no-bottom">
                                <el-date-picker
                                    v-model="query.startTime"
                                    :picker-options="pickerOptions"
                                    type="datetime"
                                    placeholder="选择开始时间"
                                    format="yyyy/MM/dd HH:mm"
                                    value-format="timestamp"
                                    align="right"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col> -->
                        <el-col :span="8">
                            <el-form-item label="终止时间:" prop="endTime" class="no-bottom">
                                <el-date-picker
                                    v-model="query.endTime"
                                    :picker-options="pickerOptions"
                                    type="datetime"
                                    placeholder="选择开始时间"
                                    format="yyyy/MM/dd HH:mm"
                                    value-format="timestamp"
                                    align="right"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </ConditionCard>
            <el-card v-loading="loading" shadow="never" body-style="padding: 24px;" class="card-margin">
                <h1 class="condition-title">审批列表</h1>
                <div class="float-right" style="margin-bottom:15px;">
                    <el-button @click="allPass">批量通过</el-button>
                </div>
                <el-table :data="taskList" style="border-top: 1px solid #ebeef5; width: 100%" @selection-change="handleSelectionChange" tooltip-effect="light">
                    <el-table-column type="selection" width="55" stripe></el-table-column>
                    <el-table-column prop="applyNo" label="申请单号" min-width="150"></el-table-column>
                    <el-table-column label="申请编号" min-width="120" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.no }}</template>
                    </el-table-column>
                    <el-table-column label="申请人" min-width="100">
                        <template slot-scope="scope">{{ scope.row.applicantName }}({{scope.row.applicantId}})</template>
                    </el-table-column>
                    <el-table-column label="申请类型" min-width="80">
                        <template slot-scope="scope">{{ scope.row.wfTypeName }}</template>
                    </el-table-column>
                    <!-- <el-table-column label="申请人编号"><template slot-scope="scope">{{ scope.row.applicantId }}</template></el-table-column> -->
                    <el-table-column label="申请时间" min-width="150" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.time | formatDate }}</template>
                    </el-table-column>
                    <!-- <el-table-column label="审批状态" min-width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == 'Process'" type="success">进行中</el-tag>
                            <el-tag v-if="scope.row.status == 'End'" type="info">通过</el-tag>
                            <el-tag v-if="scope.row.status == 'Reject'" type="warning">已驳回</el-tag>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="审批状态" min-width="80">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == 'Process'" type="info">进行中</el-tag>
                            <el-tag v-if="scope.row.status == 'End'" type="success">通过</el-tag>
                            <el-tag v-if="scope.row.status == 'Reject'" type="warning">已驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="下一级审批人" min-width="120" show-overflow-tooltip>
                        <template slot-scope="scope">{{ scope.row.approvorName}}</template>
                    </el-table-column>
                    <el-table-column label="操作" width="90">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                size="mini"
                                @click="showRollDetail(scope.row)"
                            >查看明细</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="edu-pagination">
                    <div class="float-right">
                        <el-pagination
                            :current-page="query.pageNum"
                            :page-sizes="[10, 20, 40, 100]"
                            :page-size="query.pageSize"
                            :total="query.total"
                            layout="total, sizes, prev, pager, next, jumper"
                            style="float: right;margin:10px 60px 0 0;"
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                        />
                    </div>
                </div>
            </el-card>
        </div>
        <div v-if="!listShow">
            <div class="detail_title">
                <a class="detail_map_first">培养方案</a>
                <span class="detail_map_second" style="display:inline-block;padding:0 10px;">/</span>
                <a @click="showRollDetail" class="detail_map_first">培养方案审批</a>
                <span class="detail_map_second" style="display:inline-block;padding:0 10px;">/</span>
                <span class="detail_map_second">{{dataInfo.applyNo}}</span>
            </div>
            <div>
                <ApprovalDetail :dataInfo="dataInfo" ref="approvalDetail" v-if="!listShow" />
            </div>
        </div>
    </div>
</template>
<script>
import { getMyApprovalTask } from "common/src/api/approval";
import { batchPlan } from "common/src/api/culture/culturePlan";
import { queryDic } from "common/src/api/dictionary";
import { getGraduateDegreePage } from "common/src/api/resource/course";
import filters from "common/src/filters";
import ApprovalDetail from "./approvalDetail";
import { selectTaskList } from 'common/src/api/approval';
import { getApprovalCultureList } from 'common/src/api/culture/bachelor';
import mixin from 'common/src/mixins/index';
export default {
    name: "bcl-teacher-roll-check",
    mixins: [mixin],
    components: {
        ApprovalDetail
    },
    filters: {
        formatDate(date) {
            return filters.formatDate(date, "yyyy/MM/dd hh:mm:ss");
        }
    },
    data() {
        return {
            listShow: true,
            dataInfo: {},
            query: {
                total: 0,
                startTime: "",
                endTime: "",
                applicantName: "",
                no: "",
                //status: "",
                studentId: "",
                wfType: 11,
                pageNum: 1,
                pageSize: 10
            },
            multipleSelection: [],
            options: {
                // status: [
                //     {
                //         value: "",
                //         label: "全部"
                //     },
                //     {
                //         value: "Process",
                //         label: "进行中"
                //     },
                //     {
                //         value: "End",
                //         label: "已结束"
                //     },
                //     {
                //         value: "Reject",
                //         label: "已驳回"
                //     }
                // ],
                status: [
                    {
                        value: "",
                        label: "全部"
                    },
                    {
                        value: "Process",
                        label: "进行中"
                    },
                    {
                        value: "End",
                        label: "通过"
                    },
                    {
                        value: "Reject",
                        label: "已驳回"
                    }
                ],
                faculty: [],
                profession: []
            },
            pickerOptions: {
                shortcuts: [
                    {
                        text: "今天",
                        onClick(picker) {
                            picker.$emit("pick", new Date());
                        }
                    },
                    {
                        text: "昨天",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit("pick", date);
                        }
                    },
                    {
                        text: "一周前",
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", date);
                        }
                    }
                ]
            },
            taskList: []
        };
    },
    created() {
        this.initOptions();
        this.initPage();
    },
    methods: {
        async initPage() {
            this.query.show = "1"
            this.query.prijIds= ["1"]
            let tasks = "";
            try {
                let fn = selectTaskList
                let param = _.cloneDeep(this.query)
                //邹膺(09075)查看全部审批列表
                if(this.global.currentUser.uid === "09075"){
                    fn = getApprovalCultureList
                    param.pageNum_=param.pageNum
                    param.pageSize_=param.pageSize
                }
                tasks = await fn(param);
                this.loading = false;
                if (tasks.code === 200) {
                    this.query.total = tasks.data.total_;
                    this.taskList = tasks.data.list;
                    this.taskList.forEach(row=>{
                        if(!row.result){
                            row.result=row.status;
                        }
                    })
                }
            } catch (err) {
                this.loading = false;
            }
        },
        initOptions() {
            const data = {
                lang: this.$store.getters.language || "cn",
                type: "allChild",
                keys: ["X_YX"]
            };
            queryDic(data).then(res => {
                if (res.code === 200) {
                    this.fillSelect(res.data);
                    this.filterTaskSubmit();
                }
            });
        },
        changeFaculty(val) {
            this.query.major = "";
            this.options["profession"] = [];
            let promise = this.getGraduateDegreePage(val);
            promise.then(response => {
                if (response.code === 200) {
                    response.data.list.map(item =>{
                        this.options["profession"].push({
                            value: item.code,
                            label: item.name
                        })
                    });
                }
            });
        },
        getGraduateDegreePage(college) {
            const data = {
                college: college,
                page: false
            };
            return getGraduateDegreePage(data);
        },
        fillSelect(data) {
            this._fill("faculty", data.X_YX);
            // this._fill("profession", data.G_ZY);
        },
        _fill(type, data) {
            for (const key in data) {
                this.options[type].push({
                    value: key,
                    label: data[key]
                });
            }
        },
        async handSearchChang() {},
        handleSizeChange(pageSize) {
            this.query.pageSize = pageSize;
            this.query.pageNum = 1;
            this.initPage(this.queryItem);
        },
        handleCurrentChange(pageNum) {
            this.query.pageNum = pageNum;
            this.initPage(this.queryItem);
        },
        exportDate() {},
        showRollDetail(row) {
            this.listShow = !this.listShow;
            this.dataInfo = row || {};
            if(this.listShow) this.initPage();
        },
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.query.startTime="";
            this.query.endTime="";
            this.query.applicantName="";
            this.query.no="";
            this.query.pageNum= 1;
            this.query.pageSize= 10;
            this.initPage();
        },
        filterTaskSubmit() {
            this.initPage();
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 批量通过
        allPass() {
            let that = this
            if (!that.multipleSelection.length) {
                that.$message({
                    type: 'warning',
                    message: that.$t('score.failScoreManage.disselectRecord')
                })
                return
            } else {
                let params = []
                that.multipleSelection.forEach((item, index) => {
                    params.push({
                        no: item.no
                    })
                })
                batchPlan(params).then(res => {
                    if (res.code === 200) {
                        if(res.msg){
                            this.$message({
                                type: "success",
                                message: res.msg
                            });
                        }else{
                            this.$message({
                                type: "success",
                                message: '审批成功'
                            });
                        }
                        this.initPage();
                    }
                })
            }
        },
    }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.div-main {
    margin-bottom: 16px;
}
.detail_map {
    &_first {
        color: rgba(43, 59, 78, 0.329411764705882);
    }
    &_second {
        color: rgba(0, 0, 0, 0.447058823529412);
    }
}
.detail_title {
    padding-top: 5px;
    padding-bottom: 10px;
}
</style>
